<template>

	<view class="Comment-list">
		<view class="Comment-list-li" v-for="(Comment,index) in list">
			<view class="Comment-list-li-content">
				<view class="Comment-list-li-content-left">
					<userAvatar :src="Comment.userInfo.avatar" :size="AvatarSize" :radius="AvatarRadius"></userAvatar>
				</view>
				<view class="Comment-list-li-content-right">
					<view class="Comment-list-li-content-right-header">
						<userName :fontSize="valueSize" :color="userNameColor" :username="Comment.userInfo.nickname">
						</userName>
						<view class="comment-author">作者</view>
					</view>
					<view class="content">
						<text>{{Comment.value}}</text>
					</view>
					<view class="comment-info">
						<text class="comment-ago">{{TimeAgoDiff(Comment.created_time)}}</text>
						<text class="comment-ip-address">{{Comment.ip_address}}</text>
						<text class="comment-reply">回复</text>
						<view class="comment-info-options">
							<view class="fover" @click.stop="clickFoverComment(Comment)">
								<wd-icon name="heart" size="35rpx" color="#c3c3c3"></wd-icon>
								<text>{{Comment.fover_number}}</text>
							</view>
						</view>
					</view>
					<view class="reply-list" v-if="Comment.Reply.list">

						<view class="Comment-list-li" v-for="(ReplyItem,index) in Comment.Reply.list">

							<view class="Comment-list-li-content">
								<view class="Comment-list-li-content-left">
									<userAvatar :src="ReplyItem.userInfo.avatar" :size="ReplyAvatarSize"></userAvatar>
								</view>
								<view class="Comment-list-li-content-right">
									<view class="reply-list-li-header">
										<userName :fontSize="valueSize" :color="userNameColor"
											:username="ReplyItem.userInfo.nickname"></userName>
										<wd-icon name="caret-right-small" color="#c3c3c3" size="22px"></wd-icon>
										<userName :fontSize="valueSize" :color="userNameColor"
											:username="ReplyItem.userInfo.nickname"></userName>
									</view>
									<view class="content">
										<text>{{ReplyItem.value}}</text>
									</view>
									<view class="comment-info">
										<text>{{TimeAgoDiff(ReplyItem.created_time)}}</text>
										<text>{{ReplyItem.ip_address}}</text>
										<text class="comment-reply">回复</text>
										<view class="comment-info-options">
											<view class="fover" @click.stop="ClickFoverReply(ReplyItem)">
												<wd-icon name="heart" size="35rpx" color="#c3c3c3"></wd-icon>
												<text>{{ReplyItem.fover_number}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>
					<template v-if="Comment.Reply_Count > Comment.Reply.list.length">
						<text class="look-reply" @click="clickLookReply(Comment)">--展开 {{ Comment.Reply_Count}}
							条评论--</text>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import TimeAgoDiff from '@/utool/TimeAgoDiff';
	import useTrendsStore from '@/stores/store/trends.js'
	const TrendsStore = useTrendsStore()
	import userAvatar from '@/components/user_avatar/user_avatar.vue'
	import userName from '@/components/user_name_text/user_name_text.vue';
	const Emits = defineEmits(["clickComment", "clickLookReply", "clickReply"])
	const Props = defineProps({
		list: {
			typeof: Array,
			default: () => []
		},
		valueSize: {
			typeof: String || Number,
			default: "22rpx"
		},
		AvatarSize: {
			typeof: String || Number,
			default: 80
		},
		ReplyAvatarSize: {
			typeof: String || Number,
			default: 40
		},
		AvatarRadius: {
			typeof: String || Number,
			default: "50%"
		},
		userNameColor: {
			typeof: String,
			default: "gray"
		}
	})

	function clickFoverComment(e) {
		TrendsStore.DynamicCommentFover(e)
	}

	function ClickFoverReply(e) {
		TrendsStore.DynamicCommentFover(e)
	}

	function clickReply(e) {
		Emits("clickReply", e)
	}

	function clickComment(e) {
		Emits("clickComment", e)
	}

	function clickLookReply(e) {

		let {
			id,
			dynamic_id,
			comment_top_id,
			dynamic_user
		} = e
		let {
			page,
			pages,
			limit
		} = e.Reply

		TrendsStore.DynamicCommentReplyList({
				id,
				page,
				pages,
				limit,
				dynamic_id,
			})
			.then(res => {
				console.log(res);
				let {
					data
				} = res

				let {
					list
				} = data
				e.Reply.list.push(...list)
			})
	}

	function clickDeleteComment(e) {
		Emits("clickDeleteComment")
	}
</script>

<style scoped lang="scss">
	.Comment-list {
		display: flex;
		flex-direction: column;
		gap: 35rpx;
		padding: 20rpx 30rpx;
		padding-right: 50rpx;
	}

	.Comment-list-li-content {
		display: flex;
		gap: 20rpx;
	}
	.Comment-list-li-content-right {
		flex: 1;
	}
	.Comment-list-li-content-right-header {
		display: flex;
		align-items: center;
	}
	.comment-info {
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 25rpx;
		color: gray;
		margin-bottom: 10rpx;
		margin-top: 15rpx;
	}
	.comment-reply {
		margin-left: 10rpx;
	}

	.comment-info-options {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.content {
		font-size: 25rpx;
		margin: 13rpx 0rpx;
	}
	.look-reply {
		width: 100%;
		font-size: 25rpx;
		color: gray;
	}
	.Comment-list-li .comment-info{
		margin-bottom: 30rpx;
	}
	.reply-list {
		$left: 30rpx;
		margin-left: -$left;
		&-li {
			padding: 10rpx 0rpx;
			padding-left: $left;
		}
	}

	.comment-li:active,
	.reply-list-li:active {
		background: #f5f5f5;
	}

	.reply-list-li-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.comment-author {
		display: inline-block;
		padding: 1rpx 2rpx;
		color: white;
		background: red;
		font-size: 18rpx;
		border-radius: 4rpx;
		margin-left: 10rpx;
	}

	.fover {
		display: flex;
		font-size: 25rpx;
		gap: 8rpx;
		color: #a7a7a7;
	}
</style>